import { FC, useState, useLayoutEffect, ReactElement, useEffect } from 'react'
import { Menu, Layout, ConfigProvider } from 'antd'
import { Dispatch, connect, LayoutStateType, history, Route } from 'umi'
import { getParentKeys } from '@/utils'
import zhCN from 'antd/lib/locale/zh_CN'
import Header from './components/header'
import Logo from './components/logo'
import { setStorage } from '@/utils'
import './index.less'
const { Sider } = Layout
interface IProps {
  layoutmodel: LayoutStateType
  dispatch: Dispatch
  route: Route
}

const BasicLayout: FC<IProps> = ({
  layoutmodel,
  dispatch,
  children,
  route
}): ReactElement => {
  const { menuList } = layoutmodel
  const [openKeys, setOpenKeys] = useState<string[]>([])
  const [selectedKeys, setSelectedKeys] = useState<string>('')
  const [breadCrumb, setBreadCrumb] = useState<string[]>([])
  // 获取当前角色菜单权限
  const getLayoutMenu = () => {
    dispatch({
      type: 'layoutmodel/function_getMenuList',
      callback: (response) => {}
    })
  }

  const renderMenu = (menuData: any[]) => {
    return menuData
      .filter((item) => item.code != '100103')
      .map((item) => {
        if (item.children?.length) {
          return (
            <Menu.SubMenu title={item.name} key={item.code}>
              {renderMenu(item.children)}
            </Menu.SubMenu>
          )
        } else {
          return (
            <Menu.Item
              key={item.url}
              className={
                history.location.pathname.includes(item.url.split('?')[0])
                  ? 'ant-menu-item-selected'
                  : ''
              }
            >
              {item.name}
            </Menu.Item>
          )
        }
      })
  }

  useLayoutEffect(() => {
    getLayoutMenu()
  }, [])

  useLayoutEffect(() => {
    if (history.location.pathname === '/data-upload') {
      if (history.location.query?.type) {
        setStorage('type', history.location.query?.type as string)
      }
    }
    if (history.location.query?.batchCode) {
      setStorage('batchCode', history.location.query?.batchCode as string)
    }
    const bread = route.routes.find(
      (item: any) => item.path === history.location.pathname
    )?.title
    setBreadCrumb(bread?.split('/'))
    setSelectedKeys(history.location.pathname + history.location.search)
  }, [history.location.pathname])

  // 处理路由切换
  const handleClick = (e: any) => {
    history.replace(e.key)
  }

  useEffect(() => {
    const keys = getParentKeys(menuList)
    setOpenKeys(keys)
  }, [menuList])
  return (
    <>
      <ConfigProvider locale={zhCN}>
        <div className="layout-page">
          <Sider>
            <Logo />
            <Menu
              onClick={handleClick}
              mode="inline"
              selectedKeys={[selectedKeys]}
              openKeys={openKeys}
              onOpenChange={(keys) => setOpenKeys(keys)}
            >
              {renderMenu(menuList)}
            </Menu>
          </Sider>
          <main>
            <Header breadCrumb={breadCrumb} />
            {children}
          </main>
        </div>
      </ConfigProvider>
    </>
  )
}

const mapStateToProps = ({ layoutmodel }: { layoutmodel: LayoutStateType }) => {
  return {
    layoutmodel
  }
}

export default connect(mapStateToProps)(BasicLayout)
